<style lang="less"></style>
<template>
  <div>
    <Modal
      :title="modalTitle"
      v-model="modalVisible"
      :mask-closable="false"
      :width="900"
      :styles="{ top: '100px' }"
      @on-cancel="hideModal"
    >
      <Form
        ref="equipmentRoomForm"
        :model="equipmentRoomForm"
        :label-width="110"
        :rules="rulesForm"
      >
        <Row>
          <Col :span="12" style="padding-top:25px;">
            <Form-item label="机房名称" prop="equipmentroomName">
              <Input
                type="text"
                v-model="equipmentRoomForm.equipmentroomName"
                clearable
                placeholder="请输入机房名称"
                style="width: 300px;"
              />
            </Form-item>
            <Form-item label="机房描述" prop="detail">
              <Input
                type="text"
                v-model="equipmentRoomForm.detail"
                :max="1"
                clearable
                placeholder="请输入机房描述"
                style="width: 300px;"
              />
            </Form-item>
            <Form-item label="机房管理员" prop="manager">
              <Input
                type="text"
                v-model="equipmentRoomForm.manager"
                clearable
                placeholder="请输入机房管理员"
                style="width: 300px;"
              />
            </Form-item>
            <Form-item label="机房电话1" prop="tel1">
              <Input
                type="text"
                v-model="equipmentRoomForm.tel1"
                clearable
                placeholder="请输入机房电话1"
                style="width: 300px;"
              />
            </Form-item>
            <Form-item label="机房电话2" prop="tel2">
              <Input
                type="text"
                v-model="equipmentRoomForm.tel2"
                clearable
                placeholder="请输入机房电话2"
                style="width: 300px;"
              />
            </Form-item>

            <Form-item label="位置" prop="location">
              <Input
                type="text"
                v-model="equipmentRoomForm.location"
                clearable
                placeholder="请输入位置"
                style="width: 300px;"
              />
            </Form-item>
          </Col>
          <Col :span="12">
            <div style="height: 320px; width: 100%;">
              <l-map
                v-if="showMap"
                :zoom="zoom"
                :center="center"
                :options="mapOptions"
                style="height: 100%;"
                @update:center="centerUpdate"
                @update:zoom="zoomUpdate"
              >
                <l-tile-layer :url="url" :attribution="attribution" />
                <l-marker :lat-lng="markerLatLng" :visible="markerVisible"></l-marker>
              </l-map>
            </div>
            <div>
              <Row>
                <Col :span="12">
                  <Form-item label="纬度" prop="lat" :label-width="60">
                    <Input
                      type="text"
                      v-model="equipmentRoomForm.lat"
                      clearable
                      placeholder="请输入纬度"
                      style="width: 140px;"
                    />
                  </Form-item>
                </Col>
                <Col :span="12">
                  <Form-item label="经度" prop="lng" :label-width="60">
                    <Input
                      type="text"
                      v-model="equipmentRoomForm.lng"
                      clearable
                      placeholder="请输入经度"
                      style="width: 140px;"
                    />
                  </Form-item>
                </Col>
              </Row>
            </div>
          </Col>
        </Row>
      </Form>
      <div slot="footer">
        <Button type="text" @click="hideModal">取消</Button>
        <Button type="primary" :loading="submitLoading" @click="submit">提交</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import config from "@/config";
const MAPURL = config.mapUrl;
import {
  getEquipmentRoomInfo,
  addEquipmentRoom,
  editEquipmentRoom
} from "@/api/device";
import { latLng } from "leaflet";
import { LMap, LTileLayer, LMarker, LPopup, LTooltip } from "vue2-leaflet";

import util from "@/libs/util.js";
import { Icon } from "leaflet";

delete Icon.Default.prototype._getIconUrl;
Icon.Default.mergeOptions({
  iconRetinaUrl: require("leaflet/dist/images/marker-icon-2x.png"),
  iconUrl: require("leaflet/dist/images/marker-icon.png"),
  shadowUrl: require("leaflet/dist/images/marker-shadow.png")
});

export default {
  name: "equipmentRoom-manage",
  components: {
    LMap,
    LTileLayer,
    LMarker,
    LPopup,
    LTooltip
  },
  props: {
    equipmentRoomModalVisible: {
      type: Boolean,
      default: function() {
        return false;
      }
    },
    modalType: {
      type: Number,
      default: function() {
        return 0;
      }
    },
    deptId: {
      type: Number,
      default: function() {
        return 0;
      }
    },
    equipmentroomId: {
      type: Number,
      default: function() {
        return 0;
      }
    }
  },

  data() {
    return {
      zoom: 13,
      center: latLng(30.52, 114.31),
      url: MAPURL,
      attribution: "北斗梦创",
      markerLatLng: latLng(30.52, 114.31),
      markerVisible: false,
      currentZoom: 8,
      currentCenter: latLng(30.52, 114.31),
      mapOptions: {
        zoomSnap: 0.5
      },
      showMap: true,
      modalVisible: false,

      equipmentRoomForm: {
        equipmentroomId: "",
        equipmentroomName: "",
        manager: "",
        detail: "",
        tel1: "",
        tel2: "",
        remark: "",
        lat: "",
        lng: "",
        location: "",
        deptId: ""
      },
      rulesForm: {
        equipmentroomName: [
          {
            required: true,
            message: "机房名称不能为空",
            trigger: "blur"
          }
        ],
        detail: [
          {
            required: true,
            message: "机房描述不能为空",
            trigger: "blur"
          }
        ],
        manager: [
          {
            required: true,
            message: "机房管理员不能为空",
            trigger: "blur"
          }
        ],
        tel1: [
          {
            required: true,
            message: "机房电话1不能为空",
            trigger: "blur"
          }
        ],
        tel2: [
          {
            required: true,
            message: "机房电话2不能为空",
            trigger: "blur"
          }
        ]
      },
      submitLoading: false
    };
  },
  computed: {
    modalTitle() {
      return this.modalType == 0 ? "添加机房" : "修改机房";
    }
  },
  watch: {
    equipmentRoomModalVisible(newVal, oldVal) {
      if (newVal) {
        this.modalVisible = newVal;
        if (this.modalType == 1) {
          this.edit();
        } else {
          this.add();
        }
      }
    }
  },
  methods: {
    add() {
      this.$refs.equipmentRoomForm.resetFields();
      this.equipmentRoomForm.deptId = this.deptId;
      this.markerVisible = false;
    },
    edit() {
      this.$refs.equipmentRoomForm.resetFields();

      getEquipmentRoomInfo({ equipmentroomId: this.equipmentroomId }).then(
        res => {
          if (res.code == 0) {
            this.equipmentRoomForm = res.data;
            if (this.equipmentRoomForm.lat && this.equipmentRoomForm.lng) {
              this.markerLatLng = latLng(
                parseFloat(this.equipmentRoomForm.lat),
                parseFloat(this.equipmentRoomForm.lng)
              );
              this.markerVisible = true;
            } else {
              this.markerVisible = false;
            }
          }
        },
        error => {
          console.log("submit error", JSON.stringify(error));
        }
      );
    },
    /**
     * 提交新增EquipmentRoom
     * @param newForm
     */
    submit() {
      if (this.modalType == 0) {
        this.$refs.equipmentRoomForm.validate(valid => {
          if (valid) {
            this.submitLoading = true;
            let obj = util.deepClone(this.equipmentRoomForm);
            console.log("submit", obj);
            addEquipmentRoom(this.equipmentRoomForm).then(
              res => {
                this.submitLoading = false;
                if (res.code == 0) {
                  this.$Message.success("新增成功");
                  this.hideModal();
                  this.$emit("updateDeviceTree");
                }
              },
              error => {
                console.log("submit error", JSON.stringify(error));
              }
            );
          }
        });
      } else {
        this.$refs.equipmentRoomForm.validate(valid => {
          if (valid) {
            this.submitLoading = true;
            let obj = util.deepClone(this.equipmentRoomForm);
            editEquipmentRoom(obj).then(
              res => {
                this.submitLoading = false;
                if (res.code == 0) {
                  this.$Message.success("编辑成功");
                  this.$emit("updateDeviceTree");
                  this.hideModal();
                }
              },
              error => {
                console.log("submit error", JSON.stringify(error));
              }
            );
          }
        });
      }
    },
    hideModal() {
      this.modalVisible = false;
      this.$emit("hideEquipRoomModal");
    },
    zoomUpdate(zoom) {
      this.currentZoom = zoom;
    },
    centerUpdate(center) {
      this.currentCenter = center;
    },
    innerClick() {
      alert("Click!");
    }
  },
  mounted() {}
};
</script>
